Vue2 中vuex和store基本用法

您所在的位置：网站首页 › vue vuex区别 › Vue2 中vuex和store基本用法

Vue2 中vuex和store基本用法

2023-08-27 07:13| 来源: 网络整理| 查看: 265

Vue2 中 store 基本用法-应用实例——store之store配置步骤 & vuex之mutations用法 & vuex之getters用法 1、store配置步骤

首先：在main.js中引入

import Vue from 'vue'; import App from './App.vue'; import router from './router'; import store from './store'; new Vue({ router, store, render: (h) => h(App), }).$mount("#app");

第一步：在src下新建store文件夹，其中新建index.js

src/store/index.js

import Vue from 'vue' import Vuex from 'vuex' import map from './modules/map'; Vue.use(Vuex); export default new Vuex.Store({ modules: { map } })

第二步：在store文件夹里，新建modules文件夹，其中新建map.js

src/store/modules/map.js

/* * @Descripttion: * @version: * @Author: * @Date: 2022-03-06 11:23:28 * @LastEditors: Please set LastEditors * @LastEditTime: 2022-03-14 13:50:38 */ const state = { isShow: false, // 默认不显示 tableList: [], // 表格数据 infoData: null, // 表格当前行数据 cityCode: '110099', //城市的行政编码 resourceTab: "fileM",//当前选中的tab资源管理 kindCode: '', // 种别代码 foodOptions: '', // 风味列表 }; // getters计算属性 const getters = { getDemoValue: state => state.cityCode }; // actions异步请求处理 const actions = {}; // mutations主要用来操作state const mutations = { setIsShow (state, isShow) { // 布尔值 true state.isShow = isShow; }, CHANGE_KINDCODE (state, kindCode) { // 字符串 '' state.kindCode = kindCode; }, setSelectedData (state, data) { // 数组 [] state.tableList = data; }, setInfoData (state, infoData) { // null state.infoData = infoData; }, setCityCode (state, cityCode) { // 固定值 state.cityCode = cityCode } }; export default { state, getters, actions, mutations }

第三步：在index.vue文件夹里进行引入调用

{{scope.row.mergeCount}} 内容1 内容2 内容3 import store from '@/store/index'; export default { name: "demo", data() { return { show:false, num:1, cityCode:"", //行政区划 activeName: "fileM", //默认显示资料管理 res:[ { "ID": 1, "FOODTYPENAME": '风味类型11', "FOODTYPE": "中餐馆1", "TYPE": "C" }, ], isDisabled:false, value1:'', dataList:[], codeValue:'110101-中餐风味' }; }, watch:{ deep: true, show(newVal) { if(newVal == false){ console.log("新值",newVal) } }, }, mounted() { this.store.state.map.foodOptions = this.res // 接口数据 }, methods:{ /** * 点击事件 * @return {*} */ click () { if (this.$store.state.map.isShow) {//isPartitionLayerShow this.num = 2; this.cityCode = store.state.map.cityCode; // 绝对路径 //等价于 this.cityCode = this.$store.getters.getDemoValue // 不考虑路径 store.commit('setIsShow', true); // 引入store时 } }, /** * 跳转到导入详情界面 * @param row 详情数据 */ showInfo(row) { this.$store.state.map.infoData = row; this.$store.commit('setCityCode',row.cityCode) this.$store.commit('CHANGE_KINDCODE', row.kindCode); // 未引入store时 // 第一种情况 this.$store.commit('setInfoData', null); // 未引入store时 // 第二种情况 tool = row.createTool({ vThis: this, layerName: '名字' }); this.$store.commit('setInfoData', tool); }, /** * 点击tab切换 */ handleClick(tab, event) { this.$store.state.map.resourceTab = tab.name; if (tab.label == "资料管理") { console.log("名字切换") } }, /** * 用户分享单选 * @param {array} v 选择项 */ changeSelect (v) { store.commit('setSelectedData', this.dataList); this.checked = store.state.map.foodOptions.map(item => item.clientId).every(val => v.includes(val)) store.state.map.kindCode = this.codeValue.substring(0,6); } }, components: {}, };

注：

html中调用时：$store.state.map.foodOptions

js中调用时：store.state.map.foodOptions

2、mutations用法

第一步：在store文件夹里的index.js中进行配置

const state = { cityCode: '110099', //城市的行政编码 isShow: false, // 默认不显示 tableList: [], // 表格数据 }; // mutations主要用来操作state const mutations = { setCityCode (state, cityCode) { // 固定值 state.cityCode = cityCode } }; export default { state, mutations }

第二步：在js文件或vue文件中的js模块里进行设置

// 第一种未引入store if(true){ this.$store.commit('setCityCode',data.cityCode) } // 第二种引入store import store from '@/store/index'; if(true){ store.commit('setCityCode', '110099'); }

第三步：html模块或js模块中进行使用

click() { this.cityCode = store.state.map.cityCode; } 3、getters用法

第一步：在store文件夹里的index.js中进行配置

const state = { cityCode: '110099', //城市的行政编码 }; // getters计算属性 const getters = { getDemoValue: state => state.cityCode }; export default { state, getters }

第二步：在js文件或vue文件中的js模块里进行设置

// 第一种未引入store if(true){ this.cityCode = this.$store.state.map.cityCode; // 绝对路径 // 等价于 this.cityCode = this.$store.getters.getDemoValue // 不考虑路径 }

【本文地址】

Vue2 中vuex和store基本用法

Vue2 中vuex和store基本用法

今日新闻

推荐新闻